<template>
  <div style="width: 100%;height: 100%;">
<!--    123-->
    <baidu-map class="baidu-map" center="呼和浩特" :zoom="11">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-copyright
        anchor="BMAP_ANCHOR_TOP_RIGHT"
        :copyright="[{id: 1, content: 'Copyright Message', bounds: {ne: {lng: 110, lat: 40}, sw:{lng: 0, lat: 0}}}, {id: 2, content: '<a>我是版权信息</a>'}]">
      </bm-copyright>
      <bm-geolocation anchor="BMAP_ANCHOR_TOP_LEFT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>


      <!-- 地图标点 -->
<!--      <bm-label content="呼和浩特" :labelStyle="{color: 'red', fontSize : '10px'}" :offset="{width: 5, height: 30}"/>-->
      <bm-marker :position="{lng: 111.670801, lat: 40.818311}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-marker :position="{lng: 109.840405,lat: 40.658168}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-marker :position="{lng: 106.825563, lat: 39.673734}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-marker :position="{lng: 118.956806,lat: 42.275317}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-marker :position="{lng: 119.758168,lat: 49.215333}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-marker :position="{lng: 122.263119,lat: 43.617429}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-marker :position="{lng: 109.990290,lat: 39.817179}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-marker :position="{lng: 116.090996,lat: 43.944018}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <bm-marker :position="{lng: 105.706422,lat: 38.844814}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
      <!--遮罩-->
      <bm-boundary name="呼和浩特" :strokeWeight="1" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
      <bm-boundary name="包头市" :strokeWeight="2" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
      <bm-boundary name="鄂尔多斯市" :strokeWeight="2" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
      <bm-boundary name="呼和浩特" :strokeWeight="2" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
      <bm-boundary name="锡林郭勒" :strokeWeight="2" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
      <bm-boundary name="乌海市" :strokeWeight="2" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
      <bm-boundary name="赤峰市" :strokeWeight="2" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
      <bm-boundary name="通辽市" :strokeWeight="2" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
      <bm-boundary name="呼伦贝尔市" :strokeWeight="2" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
      <bm-boundary name="阿拉善盟" :strokeWeight="2" strokeColor="blue" fillOpacity="0.1"></bm-boundary>
    </baidu-map>
  </div>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>


<style >
.baidu-map{
  width: 80vw;
  height: 80vh;
}
</style>
